<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="yes" name="apple-touch-fullscreen" />
	<meta content="telephone=no,email=no" name="format-detection" />
	<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
	<link rel="stylesheet" type="text/css" href="./js/swiper/swiper-bundle.min.css" />
	<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="./css/common.min.css" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<title>Fubit</title>
	<style>
		.icon-gonggao{
			color:#888;
		}
		.abroad-price{
			padding: 8px 8px 0 8px;
		}
		
		.abroad-price .oprice{
			color:#888;
			text-decoration:line-through;
		}
		.abroad-price .btncon{
			display: inline-block;
			text-align: center;
			margin-left: 6px;
		    width: 30px;
		}
		.abroad-off{
			padding: 0px 8px 8px 8px;
			font-size: 12px;
            color: #999;
		}
		.abroad-off .abroad-off-txt{
			color:#666;
		}
		.abroad-off .btn-off{
            transform: scale(0.9);
		}
	</style>
</head>

<body>
	<div id="preloader">
		<div class="preloader">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px"
				height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
				<g id="fbit-loading" fill="#cca252">
					<path opacity="0.2"
						d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
                    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
                    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z">
					</path>
					<path d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
                    C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
						<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
							to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
					</path>
				</g>

			</svg>
		</div>

	</div>
	<header class="nav-header">
		<div class="container-01">
			<a href="search.html">

				<div class="search-con flex align-center gutter-mt gutter-mb">

					<div class="search-text">
						<input placeholder="搜索" disabled="disabled" />
					</div>
					<div class="btnSearch">
						<i class="iconfont icon-sousuo"></i>
					</div>

				</div>

			</a>


			<div class="my-nav">
				<div class="flex justify-center swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><a href="index.html">首頁</a></div>
						<div class="swiper-slide"><a href="selling.html">熱賣商品榜</a></div>
						<div class="swiper-slide"><a href="lib.html">選品庫</a></div>
						<div class="swiper-slide"><a href="abroad.html">跨境專區</a></div>
					</div>
				</div>
			</div>

		</div>
	</header>
	<section class="container-01 flex justify-end gutter-pt-10">
		<div class="flex justify-center align-center">
			<i class="iconfont icon-gonggao"></i>
			<a class="" href="#">&nbsp;跨境物流公告</a>
		</div>
		
		
	</section>
	<section class="card">
		<div class="container-01">
			<div class="condition-con gutter-mt gutter-mb-6">
				<div class="resource flex">
					<div class="tit gutter-mr">商品來源</div>
					<div class="item">
						<a class="active" href="javascript:;" data-val="0">台灣</a>
					</div>
				</div> 
				<div class="area flex">
					<div class="tit gutter-mr">銷售區域</div>
					<div class="item">
						<a class="active" href="javascript:;" data-val="0">馬來西亞</a><a href="javascript:;"
							data-val="1">香港</a><a href="javascript:;" data-val="2">新加坡</a><a href="javascript:;"
							data-val="3">波蘭</a>
					</div>
				</div>
				<div class="leimu flex">
					<div class="tit gutter-mr">商品類目</div>
					<div class="item">
						<a class="active" href="javascript:;" data-val="0">无限</a><a href="javascript:;"
							data-val="1">服饰内衣</a><a href="javascript:;" data-val="2">鲜花园艺</a><a href="javascript:;"
							data-val="3">圖像影音</a><a href="javascript:;">鞋靴箱包</a><a href="javascript:;">食品饮料</a>
					</div>
				</div>
				<div class="other flex align-center">
					<div class="tit gutter-mr">其他篩選</div>
					<div class="flex align-center flex-wrap">
						<div class="l-input">
							<span class="label">价格</span>
							<span class="input-con input-before"><input class="input-inner" type="text"><i
									class="input-symbol">$</i></span>
							<span class="input-line">-</span>
							<span class="input-con input-before"><input class="input-inner" type="text"><i
									class="input-symbol">$</i></span>
						</div>
		
						<div class="l-input">
							<span class="label">銷量</span>
							<span class="input-con"><input class="input-inner" type="text"></span>
							<span class="input-line">-</span>
							<span class="input-con"><input class="input-inner" type="text"></span>
						</div>
					</div>

				</div>
			</div>
		</div>

	</section>
	<section class="card gutter-pt gutter-pb">
		<div class="container-01">
			<div class="sort-con flex align-center js-sort">
				<a id="recommend" class="active" href="javascript:;">推荐</a>
				<a id="amount" class="flex align-center" data-ord="1" href="javascript:;"><span>價格</span><span
						class="sort-updown"><i class="iconfont icon-xiangshang"></i><i
							class="iconfont icon-xiangxia"></i></span></a>
				<a id="sold" class="flex align-center" href="javascript:;"><span>銷量<i
							class="iconfont icon-shuzhixiajiang"></i></span></a>
			</div>
		</div>

	</section>
	<section class="card">
		<div class="container-01">
			<div class="live-list js-list">


			</div>
			<div class="more"><a class="">点击加载更多</a></div>

		</div>
	</section>



	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script src="./js/swiper/swiper-bundle.min.js"></script>
	<script src="./js/app.js"></script>
	<script>
		$(function () {
			var listData = [{
				id: "0",
				name: "北极狼 BeiJiLang六角天幕户外遮阳防晒沙滩帐篷防雨遮阳棚露营凉棚天幕帐篷", //商品名称
				imgSrc: "./images/mock/pic-2.jpg", //商品图片
				lowprice: "80", //低價
				highprice:"90",//高价
				oprice: "100", //原價
				stepPrice:[{nums:"1-19支",price:"$80",off:"65%"},{nums:"20-30支",price:"70",off:"95% off"},{nums:"31-40支",price:"$60",off:"35%"},{nums:"41-50支",price:"50",off:"55%"},{nums:"60-100",price:"40",off:"35%"},{nums:"100",price:"30",off:"25%"}],//價格梯度
				off:"15%-20%",//折扣
				shopScore: "3.8", //商店评分5分制
			}, {
				id: "1",
				name: "北极狼 BeiJiLang六角天幕户外遮阳防晒沙滩帐篷防雨遮阳棚露营凉棚天幕帐篷", //商品名称
				imgSrc: "./images/mock/pic-1.jpg", //商品图片
				lowprice: "60", //低價
				highprice:"100",//高价
				oprice: "140", //原價
				stepPrice:[{nums:"20",price:"USD60",off:"35%"},{nums:"30",price:"USD50",off:"15%"},{nums:"40",price:"USD40",off:"65%"}],//價格梯度
				off:"15%-20%",
				shopScore: "4.5", //商店评分5分制
			}, {
				id: "2",
				name: "北极狼 BeiJiLang六角天幕户外遮阳防晒沙滩帐篷防雨遮阳棚露营凉棚天幕帐篷", //商品名称
				imgSrc: "./images/mock/pic-6.jpg", //商品图片
				lowprice: "50", //低價
				highprice:"120",//高价
				oprice: "170", //原價
				stepPrice:[{nums:"20",price:"60",off:"35%"},{nums:"30",price:"50",off:"35%"},{nums:"40",price:"40",off:"35%"}],//價格梯度
				off:"15%-20%",
				shopScore: "3.1", //商店评分5分制
			}, {
				id: "3",
				name: "雅弥优格", //商品名称
				imgSrc: "./images/mock/pic-7.jpg", //商品图片
				lowprice: "80", //低價
				highprice:"110",//高价
				oprice: "130", //原價
				stepPrice:[{nums:"20",price:"60",off:"15%"},{nums:"30",price:"50",off:"65%"},{nums:"40",price:"40",off:"65%"}],//價格梯度
				off:"25%-30%",
				shopScore: "0", //商店评分5分制
			}, {
				id: "4",
				name: "哈尔滨风味红肠", //商品名称
				imgSrc: "./images/mock/pic-8.jpg", //商品图片
				lowprice: "80", //低價
				highprice:"130",//高价
				oprice: "150", //原價
				stepPrice:[{nums:"20",price:"60",off:"55%"},{nums:"30",price:"50",off:"85%"},{nums:"40",price:"40",off:"65%"}],//價格梯度
				off:"45%-60%",
				shopScore: "1.7", //商店评分5分制
			}, {
				id: "5",
				name: "腊味烧鸡山东特产小吃员工福利", //商品名称
				imgSrc: "./images/mock/pic-9.jpg", //商品图片
				lowprice: "90", //低價
				highprice:"130",//高价
				oprice: "140", //原價
				stepPrice:[{nums:"1-29罐",price:"$90",off:"35%"},{nums:"30-49罐",price:"$60",off:"55% off"},{nums:"50-90罐",price:"40",off:"75%"}],//價格梯度
				off:"55%-70%",
				shopScore: "5", //商店评分5分制
			}]
			//初始化渲染列表内容
			myList.render({
				node: '.js-list',
				temp:'abroad',
				data: listData
			});



		})
	</script>

</body>

</html>